<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style>
        .list-enter {
          opacity: 0;
          transform: translateY(-10px);
        }
        .list-enter-active {
          transition: all 0.5s;
        }
        .list-enter-to {
          opacity: 1;
          transform: translateY(0);
        }
        
        .list-leave {
          opacity: 1;
          transform: translateY(0);
        }
        .list-leave-active {
          transition: all 0.5s;
        }
        .list-leave-to {
          opacity: 0;
          transform: translateY(10px);
        }
        
        /* 给 <li> 元素加一点视觉区分 */
        ul {
          list-style: none;
          padding: 0;
        }
        
        li {
          margin: 5px 0;
          border: 1px solid #ccc;
          padding: 5px;
          cursor: pointer;
        }

    </style>
    </head>
    <body>
        <div id="app">
          <input v-model="newName" placeholder="输入同学姓名" />
          <button @click="addName">加进名单</button>
        
          <transition-group name="list" tag="ul">
            <li 
              v-for="(person, index) in persons" 
              :key="person" 
              @click="removeName(index)">
              {{ person }}
            </li>
          </transition-group>
        </div>
        
        <script src="../../../js/vue.js"></script>
        
        <script>
        new Vue({
          el: '#app',
          data() {
            return {
              newName: '',
              persons: ['张三', '李四', '小王']
            }
          },
          methods: {
            addName() {
              if (this.newName.trim()) {
                this.persons.push(this.newName.trim());
                this.newName = '';
              }
            },
            removeName(index) {
              this.persons.splice(index, 1);
            }
          }
        });
        </script>

    </body>
</html>